import { connect } from 'react-redux';
import React, { useCallback } from 'react';
import { Card, Col, Row, Form, Input, Button, message, } from 'antd'
import { updateInfo } from '@/redux/actions/user'
import "./profile.scss"

function Profile(props) {
    //表单默认信息
    const infoDefault = {
        'name': props.userInfo.name,
        'phone': props.userInfo.phone
    }
    // 信息提交回调
    const onFinish = useCallback(async (values) => {
        values.id = props.userInfo.id
        const data = await props.updateInfo(values);
        if (!data.success) {
            message.warning('修改信息失败');
            return;
        }
        if (data.success) {
            message.success('修改信息成功')
        }
    }, [])
    return (
        <div className="profile">
            <Row wrap={false}>
                <Col span={6} className='infoLeft'>
                    <Card title="关于用户" bodyStyle={{ textAlign: "center" }}>
                        <p>
                            <img src="http://study.esunr.xyz/1582549904311.png" alt="" width="100" height="100" />
                        </p>
                        <p className="userName">{props.userInfo.name}</p>
                        <p>{props.userInfo.role}</p>
                        <>
                            {props.children}
                        </>
                    </Card>
                </Col>
                <Col span={18} className="infoRight">
                    <Form
                        name="basic"
                        onFinish={onFinish}
                        layout="vertical"
                        size="middle"
                        initialValues={infoDefault}
                    >
                        <div className="infoRight_title">
                            用户信息
                        </div>
                        <Form.Item
                            label="用户名"
                            name="name"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="手机号"
                            name="phone"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="新密码"
                            name="password"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item >
                            <Button type="primary" htmlType="submit">
                                更新
                            </Button>
                            <span className="submitTips">记录留空默认为不更改</span>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div >
    )
}
export default connect(state => ({ userInfo: state.userInfo }), { updateInfo })(Profile)
